<template>
    <div>
        <p>
<!--            <button class="btn btn-bold btn-success btn-round " v-on:click="add()">-->
<!--                <i class="ace-icon fa fa-edit bigger-110"></i>-->
<!--                新增-->
<!--            </button>&nbsp;-->
            <button class="btn btn-bold btn-success btn-round " v-on:click="list(1)">
                <i class="ace-icon fa fa-refresh bigger-110"></i>
                刷新
            </button>
        </p>

        <pagination ref="pagination" v-bind:list="list" v-bind:itemCount="8"></pagination>

        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                                        <th>文件ID</th>
                        <th>文件路径</th>
                        <th>文件名</th>
                        <th>后缀名</th>
                        <th>文件大小</th>
                        <th>文件用户</th>
<!--                <th class="hidden-480">操作</th>-->
            </tr>
            </thead>

            <tbody>
            <tr v-for="file in files" :key="file.index">
                            <td>{{file.id}}</td>
                            <td>{{file.path}}</td>
                            <td>{{file.name}}</td>
                            <td>{{file.suffix}}</td>
                            <!--<td>{{file.size}}</td>-->
                            <td>{{file.size | formatFileSize}}</td>
                            <td>{{FILE_USE | optionKV(file.use) }}</td>

<!--                <td>-->
<!--                    <div class="hidden-sm hidden-xs btn-group">-->
<!--                        <button class="btn btn-xs btn-info" v-on:click="edit(file)">-->
<!--                            <i class="ace-icon fa fa-pencil bigger-120"></i>-->
<!--                        </button>-->
<!--                        <button class="btn btn-xs btn-danger" v-on:click="del(file.id)">-->
<!--                            <i class="ace-icon fa fa-trash-o bigger-120"></i>-->
<!--                        </button>-->
<!--                    </div>-->

<!--                    <div class="hidden-md hidden-lg">-->
<!--                        <div class="inner pos-rel">-->
<!--                            <button class="btn btn-minier btn-primary dropdown-toggle"-->
<!--                                    data-toggle="dropdown" data-position="auto">-->
<!--                                1-->
<!--                                <i class="ace-icon fa fa-cog icon-only bigger-120"></i>-->
<!--                            </button>-->
<!--                            <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">-->
<!--                                <li>-->
<!--                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="view" v-on:click="edit(file)">-->
<!--                                        <span class="blue">-->
<!--                                            <i class="ace-icon fa fa-pencil bigger-120" ></i>-->
<!--                                        </span>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="view" v-on:click="del(file.id)">-->
<!--                                        <span class="blue">-->
<!--                                            <i class="ace-icon fa fa-trash bigger-120"></i>-->
<!--                                        </span>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </td>-->
            </tr>
            </tbody>
        </table>

<!--        <div id="form-modal" class="modal fade" tabindex="-1" role="dialog" >-->
<!--            <div class="modal-dialog" role="document">-->
<!--                <div class="modal-content">-->
<!--                    <div class="modal-header">-->
<!--                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--                        <h4 class="modal-title">文件表表单</h4>-->
<!--                    </div>-->
<!--                    <div class="modal-body">-->
<!--                        <form class="form-horizontal">-->
<!--                                            <div class="form-group">-->
<!--                                                <label class="col-sm-2 control-label">文件路径</label>-->
<!--                                                <div class="col-sm-10">-->
<!--                                                    <input-->
<!--                                                            v-model="file.path"-->
<!--                                                            type="text" class="form-control"-->
<!--                                                            placeholder="文件路径" >-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                            <div class="form-group">-->
<!--                                                <label class="col-sm-2 control-label">文件名</label>-->
<!--                                                <div class="col-sm-10">-->
<!--                                                    <input-->
<!--                                                            v-model="file.name"-->
<!--                                                            type="text" class="form-control"-->
<!--                                                            placeholder="文件名" >-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                            <div class="form-group">-->
<!--                                                <label class="col-sm-2 control-label">后缀名</label>-->
<!--                                                <div class="col-sm-10">-->
<!--                                                    <input-->
<!--                                                            v-model="file.suffix"-->
<!--                                                            type="text" class="form-control"-->
<!--                                                            placeholder="后缀名" >-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                            <div class="form-group">-->
<!--                                                <label class="col-sm-2 control-label">文件大小</label>-->
<!--                                                <div class="col-sm-10">-->
<!--                                                    <input-->
<!--                                                            v-model="file.size"-->
<!--                                                            type="text" class="form-control"-->
<!--                                                            placeholder="文件大小" >-->
<!--                                                </div>-->
<!--                                            </div>-->

<!--                                        <div class="form-group">-->
<!--                                            <label class="col-sm-2 control-label">文件用户</label>-->
<!--                                            <div class="col-sm-10">-->
<!--                                                <select v-model="file.use" class="form-control">-->
<!--                                                    <option v-for="e in FILE_USE" :key="e.index" v-bind:value="e.key">{{e.value}}</option>-->
<!--                                                </select>-->
<!--                                            </div>-->
<!--                                        </div>-->

<!--                        </form>-->
<!--                    </div>-->
<!--                    <div class="modal-footer">-->
<!--                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--                        <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>-->
<!--                    </div>-->
<!--                </div>&lt;!&ndash; /.modal-content &ndash;&gt;-->
<!--            </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;-->
<!--        </div>&lt;!&ndash; /.modal &ndash;&gt;-->

    </div>
</template>

<script>
    import Pagination from "../../components/pagination";
    export default {
        name: "file-file",
        components: {Pagination},
        data: function () {
            return {
                file:{},
                files: [],
                FILE_USE:FILE_USE,
            }
        },
        mounted: function () {
            let _this = this;
            _this.$refs.pagination.size=10;
            _this.list(1);

        },
        methods: {
            /**
             * 列表查询
             */
            list(page) {
                let _this = this;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER+'/file/admin/file/list',
                    {
                        currentPage: page,
                        initPageNum: _this.$refs.pagination.size
                    }).then((responseDTO) => {
                    Loading.hide();
                    console.log("查询文件表列表：", responseDTO);
                    let resp=responseDTO.data;
                    _this.files = resp.responseData.list;
                    _this.$refs.pagination.render(page,resp.responseData.sumPage);
                })
            },
            /**
             * 点击【新增】
             */
            // add(){
            //     let _this=this;
            //     console.log("为不引起eslint提醒，调用_list:"+_this);
            //     _this.file={};
            //     $("#form-modal").modal("show");
            // },
            /**
             * 点击【保存】
             */
            // save(page) {
            //     let _this = this;
            //
            //     //保存校验，1!=1去掉自动生成的代码第一个||或
            //     if(1 != 1
            //                     || !Validator.require(_this.file.path,"文件路径")
            //                     || !Validator.length(_this.file.path,"文件路径",3,100)
            //                     || !Validator.length(_this.file.name,"文件名",3,100)
            //                     || !Validator.length(_this.file.suffix,"后缀名",3,10)
            //     ){
            //         return;
            //     }
            //
            //     Loading.show();
            //     _this.$ajax.post(process.env.VUE_APP_SERVER+'/file/admin/file/save', _this.file)
            //         .then((responseAdd) => {
            //             Loading.hide();
            //             console.log("保存文件表结果：", responseAdd);
            //             let resp = responseAdd.data;
            //             if (resp.success) {
            //                 $("#form-modal").modal('hide');
            //                 _this.list(1);
            //                 //添加提示
            //                 Toast.success("保存成功！");
            //             }else{
            //                 Toast.warning(resp.responseMsg);
            //             }
            //         })
            // },
            /**
             * 点击【编辑】
             */
            // edit(file){
            //     let _this=this;
            //
            //     _this.file=$.extend({},file);
            //     $("#form-modal").modal("show");
            // },
            /**
             * 点击【删除】
             */
            del(id){
                let _this=this;
                Confirm.show("删除文件表后不可恢复!",function () {
                    Loading.show();
                    _this.$ajax.delete(process.env.VUE_APP_SERVER+'/file/admin/file/delete/'+id)
                        .then((responseDel)=>{
                            Loading.hide();
                            console.log("删除文件表内容：",responseDel);
                            let resp=responseDel.data;
                            if(resp.success){
                                _this.list(1);
                                Toast.success("删除成功！");
                            }
                        });
                });
            },
        }
    }
</script>

<style scoped>

</style>